<template>
    <div>
                   <div style="height:100px">
                <el-row class="end" style="width:95%;margin-top:25px">
                    <el-button type="primary" size="mini" @click=saveAll>保存</el-button>
                    <el-button type="primary" plain size="mini" @click=submitAll>提交</el-button>
                </el-row>
                <div class="imgCol">
                    <div style="width:95%" ><el-divider ></el-divider></div>
                </div>
            </div>
        <el-scrollbar id="addTrainStep2Box">
        <el-steps :active="2"  align-center>
            <el-step title="选择培训课次"></el-step>
            <el-step title="录入详细信息"></el-step>
        </el-steps>
        <el-row style="margin-top:20px">
            <el-alert
              :closable="false"
              center
              title="详细信息"
              type="info">
            </el-alert>
        </el-row>
         <div class="imgCol">
            <el-form :model="form" :rules="rules" ref="form" label-width="110px" style="margin-top:20px" >
                <el-form-item label="培训人数" prop="requirePopulation">
                    <el-input-number v-model="form.requirePopulation" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="培训日期" prop="trainDate">
                    <el-date-picker
                        
                       @change="correctDate"
                        value-format="yyyy-MM-dd"
                        v-model="form.trainDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="培训具体时间" prop="trainTime">
                    <el-time-picker
                       
                        value-format="HH:mm"
                        is-range
                        v-model="form.trainTime"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
                    </el-time-picker>
                </el-form-item>
                <!-- <el-form-item label="培训地址" prop="trainAddress">
                    <el-row style="position:static">
                        <el-input v-model="form.trainAddress"></el-input>
                        <div style= "position:absolute;top:5px;left:350px;">
                                    <el-popover
                                        v-model="visible"
                                        placement="right"
                                        width="500px"
                                        trigger="click">
                                        <div class="amapContainer">
                                            <el-amap-search-box 
                                                class="search-box"
                                                :search-option="searchOption" 
                                                :on-search-result="onSearchResult">
                                            </el-amap-search-box>
                                            <el-amap 
                                                vid="amapContainer"  
                                                :center="mapCenter" 
                                                :amap-manager="amapManager" 
                                                :zoom="zoom" 
                                                :events="events"
                                                :plugin="plugin"
                                            >
                                                <el-amap-marker :position="marker.position" :events="marker.events"></el-amap-marker>
                                                <el-amap-info-window
                                                    :position="currentWindow.position"
                                                    :content="currentWindow.content"
                                                >
                                                </el-amap-info-window>
                                                <div v-if="markers.length!==0">
                                                    <el-amap-marker 
                                                        v-for="m in markers" 
                                                        :key="m.id" 
                                                        :position="[m.location.lng,m.location.lat]" 
                                                        :content="m.name"
                                                        :events="m.events">
                                                    </el-amap-marker>
                                    
                                                </div>
                                            </el-amap>
                                        </div>
                                       
                                        <i class="el-icon-location-information" slot="reference" style="font-size:30px;color:#409EFF"></i>
                                    </el-popover>
                        </div>
                    </el-row>
                </el-form-item> -->
                <el-form-item label="培训费用" prop="fee">
                     <el-input-number v-model="form.fee" :min="1"></el-input-number>
                     <span style="color:#fd034f">￥</span>
                </el-form-item>
                <el-form-item label="联系方式" prop="contact">
                    <el-input v-model="form.contact"></el-input>
                </el-form-item>
                 <!-- <el-form-item label="其他说明" prop="trainOthers">
                    <el-input  type="textarea" :rows="2" placeholder="请输入内容" v-model="form.trainOthers"></el-input>
                </el-form-item> -->
             
            </el-form>
        </div>
         <div class="imgCol" style="margin-buttom:20px">
           <button class="btnAddTrainSubmit pointer" @click="goToStep1">上一步</button>
        </div>

        </el-scrollbar> 
       

    </div>
</template>
<script>
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();
export default {
    props:[
        'fatherForm',
    ],
    data(){
        let self = this;
        return{
            form:{
                requirePopulation:10,
                //数组
                trainDate:[],
          
                //数组
                trainTime:[],
           
                //trainAddress:'',
                fee:100,
                contact:'',
                //0是保存，1是提交
                saveOrsubmit:0,
               // trainOthers:'',
                defaultTrainTime:[],
                defaultTrainDate:[],
            },
       
            rules:{
                requirePopulation:[
                    {
                         required: true,message: '请选择培训人数', trigger: 'blur'
                    }
                ],
                trainDate:[
                    {
                         required: true,message: '请选择培训日期', trigger: 'blur'
                    }
                ],
                trainTime:[
                    {
                         required: true,message: '请选择培训具体时间', trigger: 'blur'
                    }
                ],
                trainAddress:[
                    {
                         required: true,message: '请选择培训地点', trigger: 'blur'
                    }
                ],
                fee:[
                    {
                         required: true,message: '请输入培训费用', trigger: 'blur'
                    }
                ],
                contact:[
                    {
                         required: true,message: '请输入联系方式', trigger: 'blur'
                    }
                ]
            },
            visible:false,
            //有关地址定位
            // trianAddress:'',
            // zoom: 18,
            // //绑定当前位置的中心
            // center: [121.59996, 31.197646],
            // //绑定地图的中心，可随着搜索内容变化
            // mapCenter:[121.59996, 31.197646],
            // province:'',
            // city:'',
            // lng: 0,
            // lat: 0,
            // amapManager,
            // plugin: [{
            //     pName: 'Geolocation',
            //     enableHighAccuracy: true, //是否使用高精度定位，默认:true
			// 	timeout: 100, //超过10秒后停止定位，默认：无穷大
			// 	maximumAge: 0, //定位结果缓存0毫秒，默认：0
			// 	convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
			// 	showButton: true, //显示定位按钮，默认：true
			// 	buttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角
			// 	showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
			// 	showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
			// 	panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
			// 	zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
			// 	extensions: 'all',
            //     events: {
            //         init(o) {
            //                 // o 是高德地图定位插件实例
            //                 o.getCityInfo((status, result)=>{
            //                     console.log(status);
            //                     console.log(result);
            //                     if(status==='complete'){
            //                         self.lng = result.center[0];
            //                         self.lat = result.center[1];
            //                         self.center = [self.lng, self.lat];
            //                         self.province=result.province;
            //                         self.city=result.city;
            //                         //self.loaded = true;
            //                         self.$nextTick();
            //                     }
            //                     // console.log(self.center);
            
            //                 });
            //                 // o.getCurrentPosition((status, result) => {
            //                 //     console.log(status);
            //                 //     console.log(result);
            //                 //     if (result && result.position) {
            //                 //         self.lng = result.position.lng;
            //                 //         self.lat = result.position.lat;
            //                 //         self.center = [self.lng, self.lat];
            //                 //        // self.loaded = true;
            //                 //         self.$nextTick();
            //                 //     }
            //                 // });
            //             }
            //     }
            // }],
            // events: {
            //     init(o) {
            //     //     console.log("init ");
            //     //     console.log(self.center);
            //     //     let marker = new AMap.Marker({
            //     //         position:self.center
            //     //     });

            //     //     marker.setMap(o);
            //     }
            // },
            // marker:{
            //     position:[0,0],
            //     events:{
            //         //  click:()=>{
            //         //         console.log();
            //         //         this.trianAddress=poi.name;
            //         //         this.visible=false;
            //         //     }
            //     }
            // },
            // markers:[],
            // currentWindow:{
            //     position:[0,0],
            //     content:'',
            // },
            // searchOption: {
            //     city: '杭州',
            //     citylimit: true
            // },
        }
    },
    watch:{
        // center(){
        //     console.log("center change");
        //     console.log(this.center);
        //     this.addMarker();
        //     this.addWindow();
        // },
   
    },
    mounted(){
        var body=document.getElementById('addTrainStep2Box');
        var height=document.documentElement.clientHeight-170;
        body.style.height=height+'px';

       
        this.form=this.fatherForm;
        // this.form['trainDate']=[];
        // this.form['trainTime']=[];

        // this.form.trainTime=[this.form.startTime,this.form.endTime];
        // this.form.trainDate=[this.form.startClock,this.form.endClock];
        console.log('father come');
        console.log(this.fatherForm);
        console.log(this.form);

    },
    methods:{
        correctDate(val){
            console.log(val);
            console.log(this.form.trainDate);
        },
         //添加坐标点   
        addMarker() {
          console.log("add marker");
          let marker = {
            position:this.center
          };
         this.marker=marker;

          console.log(this.marker);
        },
        //添加坐标提示窗体
        addWindow(){
            console.log("add window");
            let window={
                position:[this.lng,this.lat],
                content:'当前位置：'+this.province+this.city
            }
            this.currentWindow=window;
            console.log(this.currentWindow);
        },
        //搜索地区
        onSearchResult(pois) {
            console.log(pois);
            let latSum = 0;
            let lngSum = 0;
            this.markers=[];
            if (pois.length > 0) {
                pois.forEach(poi => {
                    //console.log(poi);
                    let {lng, lat} = poi;
                    //console.log({lng,lat});
                    lngSum += lng;
                    latSum += lat;
                    poi.events={
                        click:()=>{
                            console.log(poi.name);
                            this.form.trainAddress=poi.name;
                            this.visible=false;
                        }
                    }
                   // this.markers.push([poi.lng, poi.lat]);
                });
                this.markers=pois;
                console.log(this.markers);
                let center = {
                    lng: lngSum / pois.length,
                    lat: latSum / pois.length
                };
                // this.lng=center.lng;
                // this.lat=center.lat;
                // this.center = [center.lng, center.lat];
                this.mapCenter=[center.lng,center.lat];
            }
        },
        goToStep1(){
            console.log("change2");
            this.$emit('keepSelection');
        },
        //整理提交的参数
        collectParams(){
               var params={
                    trainId:'',
                    trainClassNo:'',
                    startTime:'',
                    endTime:'',
                    requirePopulation:'',
                    fee:'',
                    contact:'',
                    startClock:'',
                    endClock:'',
                    //0是保存，1是提交
                    saveOrsubmit:0,
                }
        },
        //正式提交培训
        submitAll(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    var params={
                        startTime:this.form.trainDate[0],
                        endTime:this.form.trainDate[1],
                        requirePopulation:this.form.requirePopulation,
                        fee:this.form.fee,
                        contact:this.form.contact,
                        startClock:this.form.trainTime[0],
                        endClock:this.form.trainTime[1],
                        //0是保存，1是提交
                        saveOrsubmit:1,
                    }
                    this.$emit('keepSelection',params);
               
                   
                } else {
                    console.log('error submit!!');
                    // return false;
                }
            });
        },
        //保存培训
        saveAll(){
            var startT='',endT='',startC='',endC='';
            if(this.form.trainDate.length!==0){
                startT=this.form.trainDate[0];
                endT=this.form.trainDate[1]
            }
            if(this.form.trainTime.length!==0){
                startC=this.form.trainTime[0];
                endC=this.form.trainTime[1];
            }
                    var params={
                        startTime:startT,
                        endTime:endT,
                        requirePopulation:this.form.requirePopulation,
                        fee:this.form.fee,
                        contact:this.form.contact,
                        startClock:startC,
                        endClock:endC,
                        //0是保存，1是提交
                        saveOrsubmit:0,
                    }
                    this.$emit('keepSelection',params);
        }
    }
}
</script>
<style>
.container{
    width: 300px;
    height: 180px;
}
.el-header,.el-main,.el-footer,.el-aside{
    padding: 0px;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.imgCol{
    display:flex;
    justify-content: center;
    align-items: center;
}
.btnAddTrainSubmit{
    width: 400px;
    height: 40px;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    border-style: none;
    border-radius: 5px;
}

.amapContainer{
    width: 700px;
    height: 500px;
    /* position: relative; */
    
}
.search-box {
      position: absolute;
      /* top: 25px;
      left: 20px; */
}
.amap-logo img {
    display: none;
}
.amap-copyright{
    display: none !important;
}
.amap-mcode{
    display:none;
}
.pointer{
    cursor: pointer;
}
</style>